<template>
	<view>
		<view class="picker-mask" @click="closePicker" catchtouchmove="true" v-show="pickerShow"></view>
		<view class="picker-content" :class="{'pickerShow':pickerShow}" >
			<view class="picker-button">
				<text @click="closePicker">取消</text>
				<text @click="confirm">确定</text>
			</view>
			<!-- 三列选择-联动 -->
			<picker-view v-if="pickerShow" class="picker-view" indicator-class="picker-view-selected-three" v-model="pickerIndex" @change="pickerViewChangeThree">
				<picker-view-column>
					<view class="picker-item" v-for="(item, index) in dayList" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column >
					<view class="picker-item" v-for="(item, index) in hourList" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="picker-item" v-for="(item, index) in minuteList"
					 :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "time-picker",
		props: {
			time:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				pickerIndex: [0,0,0], // picker索引值
				pickerShow: false,
				dayList:[],
				hourList:[],
				minuteList:[],
			};
		},
		watch:{
			time(newVal) {
				const day = newVal.substr(8,2)-1
				const hour = newVal.split(' ')[1].substr(0,2)
				const minute = newVal.split(' ')[1].substr(3,2)
				this.pickerIndex = [day,hour,minute]
				const year = newVal.substr(0,4)
				const month = newVal.substr(5,2)
				console.log(year,month)
				var len = new Date(year,month,0).getDate();   //最后一个参数为0,意为获取2018年10月一共多少天
				this.dayList = this.getArray(len)
			}
		},
		created() {
			this.init()
		},
		methods: {
			init(){
				this.hourList = this.getArray(23)
				this.minuteList = this.getArray(59)
			},
			getArray(len){
				let str = '日'
				let arr = []
				let start = 1
				if(len==23) {
					start = 0
					str = '点'
				} else if (len==59) {
					start = 0
					str = '分'
				}
				for(var i=start;i<len+1;i++){
					arr.push((i>9?i:'0'+i)+str)
				}
				return arr
			},
			// 三列联动选项变化
			pickerViewChangeThree(e) {
				this.pickerIndex = e.detail.value;
			},
			filterStr(val){
				return val>9?val:'0'+val
			},
			// 显示组件
			showPicker() {
				// 隐藏软件盘
				uni.hideKeyboard();
				this.init();
				this.pickerShow = true;
			},
			// 确定事件——返回选中项的数组索引（也可以自定义其他返回数据，不过返回索引通用性更强）
			confirm() {
				const changeValue = this.pickerIndex
				this.pickerShow = false;
				let time = this.time.substr(0,8)
				time = time + this.filterStr(changeValue[0]+1) +' '+ this.filterStr(changeValue[1]) + ':' + this.filterStr(changeValue[2])+':00'
				this.$emit("onConfirm", time)
			},
			// 隐藏组件
			closePicker() {
				this.pickerShow = false;
			}
		}
	}
</script>

<style>
	.picker-mask {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 50;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.picker-content {
		flex-direction: column;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		height: 600upx;
		background-color: #FFFFFF;
		transform: translateY(100%);
		transition: all 200ms ease;
	}

	.pickerShow {
		transform: translateY(0) !important;
	}

	.picker-content .picker-button {
		justify-content: space-between;
		height: 80upx;
		line-height: 80upx;
	}

	.picker-button text {
		width: 180upx;
		font-size: 28upx;
		font-weight: 500;
		display: block;
		text-align: center;
		overflow: hidden;
	}

	.picker-button text:first-child {
		color: #A1A1A1;
		float: left;
	}

	.picker-button text:last-child {
		color: #FF7159;
		float: right;
	}

	.picker-content .picker-view {
		width: 100%;
		height: 500upx;
	}

	.picker-content .picker-view-selected-one,
	.picker-content .picker-view-selected-two,
	.picker-content .picker-view-selected-three {
		height: 68upx;
		line-height: 68upx;
		border-top: #666 1upx solid;
		border-bottom: #666 1upx solid;
	}

	.picker-content .picker-view-selected-one {
		position: relative;
		left: 25%;
		width: 50%;
	}

	.picker-content .picker-view-selected-two {
		position: relative;
		left: 15%;
		width: 70%;
	}

	.picker-content .picker-view-selected-three {
		position: relative;
		left: 5%;
		width: 90%;
	}

	.picker-view .picker-item {
		width: 100%;
		height: 34px;
		line-height: 34px;
		font-size: 15px;
		font-weight: 600;
		display: block;
		text-align: center;
	}
</style>
